<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template slot="filter-content">

        <dic-list-select v-model="listQuery.params.logType" dic-code="log_type" class="filter-item" />
        <el-input v-model="listQuery.params.realName" clearable placeholder="操作人" style="width: 200px;" class="filter-item" />
        <el-date-picker
          v-model="listQuery.params.dateRange"
          class="filter-item"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </template>

      <template slot="data-columns">

        <el-table-column
          label="日志类型"
          prop="logType_dictText"
          align="center"
        />

        <el-table-column
          label="请求地址"
          prop="uri"
        />

        <el-table-column
          label="日志标题"
          prop="title"
        />

        <el-table-column
          label="操作人"
          prop="realName"
          align="center"
        />

        <el-table-column
          label="IP地址"
          prop="ip"
        />

        <el-table-column
          label="执行结果"
          align="center"
        >

          <template slot-scope="scope">
            <span v-if="scope.row.success" style="color: #1aac1a">成功</span>
            <span v-else style="color: #ff0000">失败</span>
          </template>

        </el-table-column>

        <el-table-column
          label="操作时间"
          prop="createTime"
        />

        <el-table-column
          align="center"
          label="操作"
        >

          <template slot-scope="scope">

            <el-tooltip class="item" effect="dark" content="查看日志详情" placement="bottom">
              <el-button type="primary" icon="el-icon-document" size="small" circle @click="showDetail(scope.row)" />
            </el-tooltip>
          </template>
        </el-table-column>

      </template>

    </data-table>

    <el-dialog title="日志详情" :close-on-click-modal="false" :visible.sync="dialogVisible" width="50%" top="5vh">

      <el-form ref="postForm" :model="postForm" label-position="left" label-width="120px">

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="日志类型">
              <el-input :value="postForm.logType_dictText" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址">
              <el-input :value="postForm.uri" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日志标题">
              <el-input :value="postForm.title" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作人">
              <el-input :value="postForm.realName" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IP地址">
              <el-input :value="postForm.ip" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执行结果">
              <el-input :value="postForm.success?'成功':'失败'" readonly />
            </el-form-item>

          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间">
              <el-input :value="postForm.createTime" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作数据">
              <el-input type="textarea" :rows="5" :value="postForm.data" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息">
              <el-input type="textarea" :rows="3" :value="postForm.log" readonly />
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>

    </el-dialog>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import DicListSelect from '@/views/sys/dict/components/DicListSelect'

export default {
  components: { DicListSelect, DataTable },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          dateRange: []
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/sys/log/paging'
      },

      dialogVisible: false,
      postForm: {}
    }
  },

  methods: {

    // 批量操作监听
    showDetail(data) {
      this.dialogVisible = true
      this.postForm = data
    }
  }
}
</script>
